import React from 'react';
import { Button, Form, Input, message } from 'antd';

import styles from './index.module.less';
import api from '../../api';
import { ILoginParams } from '../../types/api';
import storage from '../../utils/storage';

//登录页
const Login: React.FC = () => {
  const onFinish = async (values: ILoginParams) => {
    const data = await api.login(values);
    storage.set('token', data);
    if (data) {
      window.location.href = '/welcome';
    } else {
      message.error('用户名或者密码错误');
    }
  };
  return (
    <div className={styles.login}>
      <div className={styles.login_wrapper}>
        <div className={styles.title}>系统登录</div>
        <Form name='basic' onFinish={onFinish}>
          <Form.Item
            label='用户名'
            name='userName'
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='密码'
            name='userPwd'
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item label={null}>
            <Button type='primary' block htmlType='submit'>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
